const path=require('path');

//每次清空
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

//清除License
const TerserPlugin = require('terser-webpack-plugin');

//css打包插件
const MiniCssExtractPlugin =require('mini-css-extract-plugin');

//webpack server配置
const webpack = require('webpack');

//html打包插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

//多页面html打包函数
var getHtmlConfig = function(name){
    return {
        template : './src/view/'+name+'.html',
            filename : 'view/'+name+'.html',
            inject : true,
            hash : true,
            chunks : ['common',name],
            minify :{
                collapseWhitespace:false
            }
    }
}

var config = {
    entry: {
        'common': ['./src/page/common/index.js'],
        'index' : ['./src/page/index/index.js'],
        'login' : ['./src/page/login/index.js'],
        'regist' : ['./src/page/regist/index.js'],
        'MyAccount' : ['./src/page/MyAccount/index.js'],
        'catalog-main' : ['./src/page/catalog-main/index.js']
    },
    output:{
        filename:'js/[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer:{
        
        port : 8888,
        contentBase : path.resolve(__dirname,'dist')
    },

    module : {
        rules : [
            {test : /\.css$/, 
            use :[
                {
                    loader : MiniCssExtractPlugin.loader,
                    options : {
                        publicPath : '../'
                    }
                },
                {
                    loader:'css-loader',
                    options: {
                        esModule:false,
                        importLoaders:1
                    }
                }
                
            ]
        },
        {test : /\.htm$/,
         use : [
             {
                loader : 'html-loader',
                options: {
                 esModule:false,
                 minimize:false
             }
         }
        ]
    },
        {test : /\.(png|svg|jpg|gif)$/, 
          use :[
              {
                  loader:'url-loader',
                  options :{
                      limit:1000,
                      esModule:false,
                      name:'images/[name].[ext]'
                    }
                }
            ]
        }
        ]
    },

    plugins : [
        //new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename : 'css/[name].css'
        }),
        new HtmlWebpackPlugin(getHtmlConfig('index')),
        new HtmlWebpackPlugin(getHtmlConfig('login')),
        new HtmlWebpackPlugin(getHtmlConfig('regist')),
        new HtmlWebpackPlugin(getHtmlConfig('MyAccount')),
        new HtmlWebpackPlugin(getHtmlConfig('catalog-main')),


        new webpack.HotModuleReplacementPlugin()
    ],
    optimization : {
        minimize:false,
        minimizer:[
            new TerserPlugin({
                extractComments: false,
            })
        ],
        splitChunks : {
            cacheGroups : {
                commons : {
                    name:'util',
                    chunks:'all',
                    minChunks:2,
                    minSize:0
                }
            }
        }
    },
    
    externals :{
        'jquery' : 'window.jQuery'
    },
    // js中使用别名配置
    resolve : {
        alias : {
            util : __dirname + '/src/util',
            page : __dirname + '/src/page',
            images : __dirname + '/src/images',
            service : __dirname + '/src/service',
            node_modules : __dirname + '/node_modules',
        }
    }
};

module.exports=config;

// var path = require('path');

// module.exports = {
//   mode: 'development',
//   entry: './foo.js',
//   output: {
//     path: path.resolve(__dirname, 'dist'),
//     filename: 'foo.bundle.js'
//   }
// };